<template>
  <div v-show="isModalVisible" class="modal-overlay">
    <div class="modal-content">
      <div class="header-box">
        <img class="header-arrow" src="@assets/image/left.png" />
        <img class="header-center" src="@assets/image/pop-title.png" />
        <img class="header-arrow" src="@assets/image/right.png" />
      </div>

      <div class="content-box" ref="boxEle">
        <template v-if="step === 1">
          <img src="@assets/image/avatar.png" class="avatar" />
          <div class="content-info">
            <div class="row">
              <span class="label">昵称</span>
              <input
                v-model.trim="store.user.uname"
                maxlength="6"
                class="name_input"
                type="text"
                placeholder="请输入昵称                6"
              />
            </div>
            <div class="row">
              <span class="label">性别</span>
              <div class="custom-ridio" @click="store.user.gender = 1">
                <img class="radio-icon" v-if="store.user.gender === 1" src="@assets/image/checked.png" />
                <img class="radio-icon" v-if="store.user.gender === 0" src="@assets/image/uncheck.png" />
                <span class="radio-icon-text">男</span>
              </div>
              <div class="custom-ridio" @click="store.user.gender = 0">
                <img class="radio-icon" v-if="store.user.gender === 1" src="@assets/image/uncheck.png" />
                <img class="radio-icon" v-if="store.user.gender === 0" src="@assets/image/checked.png" />
                <span class="radio-icon-text">女</span>
              </div>
            </div>
          </div>
        </template>
        <template v-if="step === 2">
          <img src="@assets/image/avatar.png" class="avatar" />
          <div class="content-info-2">
            <div class="avatar-text-box">
              <img src="@assets/image/avatar-text.png" class="avatar-text" />
            </div>
            <div class="style-box">
              <span
                v-for="item in tagList"
                :key="item.id"
                @click="store.user.avatar_type = Number(item.id)"
                :class="{ item: true, selected: store.user.avatar_type === Number(item.id) }"
                >{{ item.name }}</span
              >
            </div>
          </div>
        </template>
        <template v-if="step === 3">
          <img src="@assets/image/avatar.png" class="avatar" />
          <div class="content-info-2">
            <div class="avatar-text-box">
              <img src="@assets/image/image-text.png" class="avatar-text" />
            </div>
            <div class="image-text-box">
              <textarea v-model.trim="store.user.remark" placeholder="请填写信息..." rows="4" maxlength="30"></textarea>
              <span v-if="!store.user.remark" class="ab-text">30</span>
            </div>
          </div>
        </template>
        <template v-if="step === 4">
          <div class="loading-box">
            <div style="text-align: center; margin-top: 20px">
              <img src="@assets/image/draw-loading.png" class="draw-loading" />
            </div>
            <div class="loading-list">
              <img :src="store.index.persion[0].avatar" />
              <img :src="store.index.persion[1].avatar" />
              <img class="main" :src="ticketInfo.avatarurl" />
              <img :src="store.index.persion[2].avatar" />
              <img :src="store.index.persion[3].avatar" />
            </div>
            <!-- <svg-icon icon-class="loading2"/> -->
          </div>
        </template>
        <template v-if="step === 5">
          <div class="card-box" ref="cardRef" :style="{ width: cardWidth }">
						<span class="time" style="">2025年1月29日 18:00</span>
            <img src="@assets/image/card-box2.png" alt=""/>						
            <img :src="ticketInfo.avatarurl" @click="$preview(ticketInfo.avatarurl)" class="avatar" crossorigin="anonymous" />            
						<span class="ab-number">NO. {{ ticketInfo.userno }}</span>
            <span class="ab-name">昵称：{{ ticketInfo.uname }} </span>
						<span class="ab-want-txt">对春晚的期待 ▼</span>
            <div class="ab-image-text">{{ ticketInfo.remark }}</div>
            <div class="qrcode-group">
							<div class="qrcode-item">
								<img :src="ticketInfo.shipinhaoEwm" crossorigin="anonymous" />
								<span class="light-yellow">▲预约春晚</span>
							</div>
              <div class="qrcode-item">
              	<img :src="ticketInfo.acivityEwm" crossorigin="anonymous" />
              	<span class="bg-gray">▲领入场券</span>
              </div>
            </div>
						
          </div>          
        </template>
      </div>
      <img v-if="imgUrl" :src="imgUrl" :style="{ width: cardWidth }" class="card-box-img"/>
      <div class="footer-box">
        <slot name="footer" v-if="step !== 5">
          <div class="next submit" @click="save" v-if="step == 3">提 交</div>
          <div class="next" @click="nextStep" v-else><img src="@assets/image/next.png" /></div>
          <div class="back" @click="backStep" v-if="step != 1"><img src="@assets/image/back.png" /></div>
        </slot>
        <slot name="footer" v-else>
          <!-- <a class="back" href="https://mp.weixin.qq.com/s/Q0zqyv8n-xt4XUfMeihIsw" target="_blank"><img src="@assets/image/share.png" /></a> -->
          <div class="next" @click="download()"><img src="@assets/image/download.png" /></div>
        </slot>
      </div>
      <div class="close-box" @click="closeModal">
        <img src="@assets/image/close.png" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { debounce } from "lodash";
import { ref, defineEmits, watch, onMounted } from "vue";
import { domToImg, domToImgDataURL, downloadImg} from "@/utils/index.js";

import { useMobileStore } from "@/api/store";

const store = useMobileStore();

const isModalVisible = ref(true);

const emits = defineEmits(["close"]);

function openModal() {
  isModalVisible.value = true;
}

const tagList = ref([
  {
    id: 1,
    name: "潮流",
  },
  {
    id: 2,
    name: "科技",
  },
  {
    id: 3,
    name: "古装",
  },
  {
    id: 4,
    name: "职业",
  },
  {
    id: 0,
    name: "随机",
  }
]);

// function getTagOptions() {
//   return store.tag
//     .then((res) => {
//       tagList.value = res || [];
//     })
//     .catch((_) => {
//       console.error(_);
//     });
// }

document.body.style.overflow = "hidden";

// 阻止滚动
watch(isModalVisible, (newVal, oldVal) => {
  if (newVal && document?.body) {
    // When the modal is open, prevent background scrolling
    document.body.style.overflow = "hidden";
  } else {
    // When the modal is closed, allow background scrolling
    document.body.style.overflow = "";
  }
});

const cardRef = ref(null);
function downloadBrowser() {
  setTimeout(async () => {
    const res = await domToImg(cardRef.value);
    // downloadImg(res);
  }, 500);
}

function download() {
  // if (isWechat) {
    previewImg()
  // } else {
    // downloadBrowser()
  // }
}

function closeModal() {  
  store.clearUserInfo()
  isModalVisible.value = false;
  emits("close", false);
}

const boxEle = ref(null);
const cardWidth = ref("auto");
onMounted(() => {
  // if (boxEle.value) {
    cardWidth.value = ~~((boxEle.value.offsetHeight / 9) * 16) + "px";
  // }
  // getTagOptions();  
});

const step = ref(1);
function nextStep() {
  if ((step.value === 1 && !store.user?.uname) || store.user.uname.maxlength > 6) {
    alert("请输入昵称且长度不超过6");
    return;
  }
  
  if (step.value === 2 && store.user.avatar_type==null) {
    alert("请选择标签");
    return;
  }
  step.value++;

  if(step.value===5) {
    setTimeout(() => {
      previewImg()
    }, 300);
  }
}
function backStep() {
  step.value = step.value - 1;
}

const ticketInfo = ref({
  avatarurl: '',
  userno: '',
  uname: '',
  remark: '',
  shipinhaoEwm: '',
  acivityEwm: ''
  // avatarurl: 'http://120.55.170.90/uploads/20250119/71adfcd0f3f0617e03331693fccb2103.png',
  // userno: '0100038',
  // uname: '测试',
  // remark: '爱神的啊十大科技阿萨的开发撒打发阿道夫立',
  // shipinhaoEwm: 'http://120.55.170.90/uploads/20250119/c3e7c18b62abf85add1b2848ff4d6a85.png',
  // acivityEwm: 'http://120.55.170.90/uploads/20250119/c3e7c18b62abf85add1b2848ff4d6a85.png'
});
// let count = ref(0);
const save = debounce(() => {
  if (step.value === 3 && !store.user.remark) {
    alert("请输入本次大会期望");
    return;
  }
  if (store.lock) {
    alert("当前时段生成上限，请稍后再试！");
    return;
  }
  return store.saveToImg(store.user).then((res) => {
    console.log(res)
    if(res) {
      step.value = 4;
      ticketInfo.value.userno = res.userno
      ticketInfo.value.remark = res.remark
      ticketInfo.value.uname = res.username
      ticketInfo.value.avatarurl = import.meta.env.VITE_IMAGE_BASE_URL + res.avatarurl      
      ticketInfo.value.shipinhaoEwm = import.meta.env.VITE_IMAGE_BASE_URL + res.shipinhaoEwm
      ticketInfo.value.acivityEwm = import.meta.env.VITE_IMAGE_BASE_URL + res.acivityEwm
    }
    if (store.count > 4) {
      store.lock = true;
    } else {
      store.count++;
    }
  }).catch(_ => {})
}, 1000);

// 将入场券转换成图片
const imgUrl = ref(null)
const isDone = ref(true)
function previewImg() {
  if (isDone.value) {
    setTimeout(async () => {
      imgUrl.value = await domToImgDataURL(cardRef.value);
      cardRef.value.style.display = 'none'
      isDone.value = false
      alert("长按入场券保存哦~")
      store.clearUserInfo() 
    }, 500);
  } else {
    alert("长按入场券保存哦~")
  }
}
</script>

<style scoped lang="less">
.modal-overlay {
  width: 100%;
  // font-family: MyCustomFont;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.modal-content {
  padding: 20px;
  border-radius: 5px;
  position: relative;
  z-index: 1001;
  // border: 1px solid pink;
  height: 400px;
  background-image: url("@assets/image/pop-content.png");
  background-size: 370px auto;
  background-repeat: no-repeat;
  background-position: top center;
  position: relative;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-box {
  width: 100%;
  justify-content: center;
  display: flex;
  position: relative;
  top: 40px;

  .header-arrow {
    width: 20%;
    transform: scale(0.5);
  }

  .header-center {
    width: 200px;
  }
}

.content-box {
  margin-top: 80px;
  width: 280px;
  height: 35%;
  flex-shrink: 0;
  display: flex;

  .avatar {
    flex-shrink: 0;
    width: 27%;
    height: auto;
    object-fit: contain;
    padding: 2px;
  }
  .content-info {
    padding: 10px;
    padding-top: 30px;
    .row {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .label {
        margin-right: 10px;
        flex-shrink: 0;
        color: #f3ddbd;
      }
      .name_input {
        width: 80%;
        border-radius: 7px;
        background-color: #ffe3cc;
        border: none;
        padding: 5px;
      }
      .name_input::placeholder {
        font-size: 12px; /* 设置placeholder的字体大小 */
        color: #b6885f; /* 这里还可以设置placeholder的文本颜色 */
      }

      .custom-ridio {
        display: flex;
        align-items: center;
        .radio-icon {
          margin: 0 10px;
          width: 15px;
        }
        .radio-icon-text {
          color: #eebd74;
        }
      }
    }
  }

  .content-info-2 {
    .avatar-text-box {
      width: 100%;
      text-align: center;
      padding-top: 20px;
    }
    .avatar-text {
      width: 80%;
    }
    .style-box {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 56px;
        height: 25px;
        border-radius: 5px;
        background-color: #ffe3cc;
        margin-right: 10px;
        cursor: pointer;
        color: #bc8152;
        text-align: center;
        line-height: 25px;
        margin: 5px;
      }
      .selected {
        color: #b62300;
        background-color: #eebd74;
      }
    }
    .image-text-box {
      padding-top: 5px;
      width: 100%;
      text-align: center;
      position: relative;
      textarea {
        padding: 5px 12px;
        width: 90%;
        border-radius: 10px;
        background-color: #fae4cf;
      }
      .ab-text {
        position: absolute;
        right: 20px;
        bottom: 10px;
        color: #bf9572;
      }
      textarea::placeholder {
        color: #bf9572;
      }
    }
  }

  .loading-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    .draw-loading {
      width: 50%;
    }
    .loading-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 10px;
      img {
        width: 36px;
        height: 36px;
        object-fit: contain;
        border-radius: 50%;
        border: 1px solid #ffbb8e;
      }
      .main {
        width: 50px;
        height: 50px;
        border: 3px solid #8acf3e;
        border-radius: 50%;

      }
    }
  }

  .card-box {
    width: 100%;
    // background: url('../assets/image/card-box2.png') no-repeat;
		background-size: cover;
    margin: 0 auto;
    text-align: center;
    position: relative;
    transform: scale(1.5);
		.time {
			background-color: #DEFF15;
			border-radius: 10px;
      line-height: 1.2;
      padding-left: 4px;
      padding-right: 4px;
      padding-bottom: 1px;
			font-size: 12px;
      transform: scale(0.4);
      font-family: 'Noto Sans SC';
			font-weight: 700;
			position: absolute;
			right: -11%;
			top: 6.5%;
		}
    img {
      height: 100%;
      object-fit: contain;
    }
    .avatar {
      width: 42%;
      height: auto;
      position: absolute;
      top: 15.8%;
      left: 28.4%;
      object-fit: contain;
    }
    .ab-number {
      position: absolute;
      top: 18%;
      right: 0;
      text-align: center;
      font-size: 12px;
      color: white;
      transform: scale(0.4);
      font-family: 'Noto Sans SC';
    }
    .ab-name {
      position: absolute;
      top: 29.8%;
      right: -8.3%;
      width: 120px;
      text-align: left;
      font-size: 12px;
      color: white;
      transform: scale(0.4);
      font-family: 'Noto Sans SC';
    }
		.ab-want-txt {
			position: absolute;
			top: 40.2%;
			right: -8.3%;
			width: 120px;
			text-align: left;
			font-size: 10px;
			color: white;
			transform: scale(0.4);
		}
    .ab-image-text {
      position: absolute;
      width: 55%;
      height: 53px;
      padding: 3px 4px;
      top: 36.5%;
      right: -9.2%;
      text-align: left;
      font-size: 10px;
      color: white;
      transform: scale(0.4);
      font-family: 'Noto Sans SC';
      border: 1px solid white;
      border-radius: 6px;
    }
    .qrcode-group {
      display: flex;
      width: fit-content;
      position: absolute;
      transform: scale(0.4);
      bottom: -2%;
      right: -4.3%;
      .qrcode-item {
        display: flex;
        justify-content: center;
        flex-direction: column;        
        span {
          font-size: 7px;
          font-weight: 600;
          padding-left: 3px;
          padding-right: 3px;
          padding-bottom: 1px;
          color: #000;
          margin-top: 3px;
          border-radius: 4px;
        }
        .light-yellow {
          background-color: #DEFF15;
        }
        .bg-gray {
          background-color: #DEDEDE;
        }
      }
      .qrcode-item + .qrcode-item {
        margin-left: 10px;
      }
      img {
        width: 45px;
        height: 45px;
        border-radius: 10px;
      }
      img + img {
        margin-left: 10px;
      }
    }
  }  
}
.card-box-img {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  top: 35%;
  text-align: center;
  position: absolute;
  transform: scale(1.8);
  object-fit: contain;
}
.footer-box {
  display: flex;
  // border: 1px solid purple;
  width: 280px;
  flex-shrink: 0;
  margin-top: 40px;
  justify-content: space-between;
  flex-direction: row-reverse;
  .back {
    width: 45%;
    height: auto;
  }
  .next {
    width: 45%;
  }
  .submit {
    background-image: url("@assets/image/button.png");
    background-size: contain;
    background-repeat: no-repeat;
    color: #b62300;
    font-size: 18px;
    text-align: center;
    line-height: 41px;
  }
  img {
    width: 100%;
  }
}

.close-box {
  position: absolute;
  bottom: -61px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  img {
    width: 100%;
  }
}
</style>
